Interactivity

MACS 40700
University of Chicago

May 1, 2017

Visual information-seeking mantra

Overview first, zoom and filter, then details on demand

  1. Present the most important figures or most relevant points to the audience
  2. Allow readers to dig into the information, explore, and come up with their own stories

Linear vs non-linear

Think choose your own adventure stories.

Interaction techniques

  • Scroll and pan
  • Zoom
  • Open and close
  • Sort and rearrange
  • Search and filter

Central limit theorem

Central Limit Theorem Visualized in D3

Seeing theory

Seeing Theory: A visual introduction to probability and statistics

The changing American diet

The Changing American Diet

How (un)popular is Donald Trump?

How popular/unpopular is Donald Trump?

Gun deaths in America

Gun Deaths in America

You draw it

You Draw It: Just How Bad Is the Drug Overdose Epidemic?

Movie explorer

Movie explorer

Revenue effect of restoring the tax-preferred status

Revenue Effect of Restoring the Tax-Preferred Status of Over-the-Counter Drugs Purchased Through Health Savings Accounts, Flexible Spending Accounts, and Health Reimbusement Arrangements through the Repeal of Section 9003 of the Affordable Care Act.

America’s public bible

America’s Public Bible: Biblical Quotations in U.S. Newspapers

Interactive graphics in R

  • ggplot2 and ggvis
  • JavaScript libraries
    • D3
    • Highcharts
    • Leaflet
    • Plotly
  • Why use R?
  • htmlwidgets

plotly

  • Plot.ly
  • plotly.js
  • plotly API libraries

ggplotly()

ggplotly()

ggplotly()

ggplotly()

# add vehicle labels to tooltips
p <- ggplot(mpg, aes(displ, hwy)) +
  geom_point(aes(color = class, text = str_c(manufacturer, model, sep = " "))) +
  geom_smooth()

ggplotly(p)

ggplotly()

Modifying ggplotly() objects

## List of 8
##  $ x            :List of 9
##   ..$ data     :List of 3
##   ..$ layout   :List of 9
##   ..$ config   :List of 3
##   ..$ source   : chr "A"
##   ..$ attrs    :List of 3
##   ..$ cur_data : chr "869f12b22a92"
##   ..$ visdat   :List of 3
##   ..$ highlight:List of 6
##   ..$ base_url : chr "https://plot.ly"
##   ..- attr(*, "TOJSON_FUNC")=function (x, ...)  
##  $ width        : NULL
##  $ height       : NULL
##  $ sizingPolicy :List of 6
##   ..$ defaultWidth : chr "100%"
##   ..$ defaultHeight: num 400
##   ..$ padding      : NULL
##   ..$ viewer       :List of 6
##   ..$ browser      :List of 4
##   ..$ knitr        :List of 3
##  $ dependencies :List of 3
##   ..$ :List of 10
##   .. ..- attr(*, "class")= chr "html_dependency"
##   ..$ :List of 10
##   .. ..- attr(*, "class")= chr "html_dependency"
##   ..$ :List of 10
##   .. ..- attr(*, "class")= chr "html_dependency"
##  $ elementId    : chr "869f4a1ea1a7"
##  $ preRenderHook:function (p, registerFrames = TRUE)  
##  $ jsHooks      :List of 1
##   ..$ render:List of 1
##  - attr(*, "class")= chr [1:2] "plotly" "htmlwidget"
##  - attr(*, "package")= chr "plotly"